<template>
  <section>
    <div v-if="title" class="create-btn">
      <div @click="addOrUpdateHandle" :class="{'forbid': forbidButton}"><i class="el-icon-plus" style="margin-right: 5px;font-weight: bold;"></i>{{title}}</div>
    </div>

    <div class="menu-list">
      <div v-for="item in menuList" :key="item.index" @click="selectMenu(item)" :class="{'active': currentIndex === item.index && !hideCurMenu, 'folder': item.isFolder}" class="menu-item">
        <i v-if="item.isFolder" class="menu-icon" :class="item.icon"></i>{{item.name}}
      </div>
    </div>
    
    <slot></slot>
  </section>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 1
    }
  },
  props: ['menuList','title','forbidButton', 'hideCurMenu'],
  methods:{
    selectMenu(item) {
      this.currentIndex = item.index;
      this.$emit("selectMenu", item.index, 1, item);
    },
    addOrUpdateHandle() {
      if(this.forbidButton) return;
      this.$emit("addOrUpdateTaskHandle");
      this.$emit("addOrUpdateProjectHandle");
      this.$emit('openTaskFormDialog');
    }
  }
}
</script>

<style lang="scss" scoped>
section{
  .create-btn{
    height: 92px;
    padding-top: 26px;
    >div{
      cursor: pointer;
      width: 200px;
      line-height: 40px;
      text-align: center;
      color: #FFF;
      background: #4983FF;
      box-shadow: 0 2px 4px #4983FF;
      margin: 0 auto;
      border-radius: 5px;
      font-size: 16px;
    }
    .forbid{
      background: #A4C4FF;
      box-shadow: 0 2px 4px #A4C4FF;
    }
    .forbid:hover{
      cursor: not-allowed;
    }
  }
  .menu-list{
    .menu-item{
      line-height: 50px;
      padding-left: 50px;
      color: #75797E;
      cursor: pointer;
      position: relative;
      white-space: nowrap;
      &:hover{
        background: #F7F7F7;
      }
      .menu-icon{
        position:absolute;
        left: 20px;
        top: 15px;
        font-size: 20px;
        font-weight: normal;
      }
    }
    .menu-item.folder {
      color:black;
      font-size: 16px;
    }
    .menu-item.active{
      color: #4983FF;
      background: #ECF1FD;
      &::before{
        content: '';
        height: 100%;
        width: 5px;
        background: #4983FF;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}
</style>